<template>
    <!--指示栏部分-->
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 合同管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>合同展示 (展示进行中或异常未处理合同,其余查询需搜索实现)</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    <!--搜索部分-->
        <div class="container">
            <div class="handle-box">
                <div style="margin-top: 10px;margin-bottom: 10px;">
                    <!--多个搜索条件-->
                    <el-checkbox-group v-model="checkboxGroup" size="medium">
                        <el-checkbox-button
                                style="margin-bottom: 10px;"
                                v-for="kind in kinds"
                                :label="kind.mess"
                                :key="kind.text"
                        >
                            {{kind.text}}
                        </el-checkbox-button>
                    </el-checkbox-group>
                        <el-input type="textarea" style="margin-top: 10px"
                                  v-model="text"
                                  placeholder="1 ,先在上方勾选搜索条件.  2,按勾选条件顺序输入对应搜索数据内容. 3,用-隔开不同搜索内容.
例如 : 搜索合同编号为1,合同名称为1的合同-先勾选合同编号,合同名称;再输入1-1,点击搜索即可.">
                        </el-input>
                </div>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <!--数据表格部分-->
            <el-table
                    v-loading="loading"
                    element-loading-text="数据加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="contract_number" label="合同编号" align="center"></el-table-column>
                <el-table-column prop="contract_name" label="合同名称" align="center"></el-table-column>
                <el-table-column prop="user_name" label="甲方" align="center"></el-table-column>
                <el-table-column prop="user_idcard" label="甲方证件" align="center"></el-table-column>
                <el-table-column prop="user_phone" label="甲方通讯" align="center"></el-table-column>
                <el-table-column prop="other_name" label="乙方" align="center"></el-table-column>
                <el-table-column prop="other_idcard" label="乙方证件" align="center"></el-table-column>
                <el-table-column prop="other_phone" label="乙方通讯" align="center"></el-table-column>
                <el-table-column prop="staff_name" label="平台人员" align="center"></el-table-column>
                <el-table-column prop="staff_phone" label="平台通讯" align="center"></el-table-column>
                <el-table-column prop="contract_type" label="合同类型" align="center">
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.contract_type==='设计合同'?'success':(scope.row.contract_type==='装修合同'?'success':'')"
                        >{{scope.row.contract_type}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="contract_status" label="合同状态" align="center">
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.contract_status==='已完成'?'success':(scope.row.contract_status==='异常终止'?'danger':'')"
                        >{{scope.row.contract_status}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index,scope.row.id,scope.row.contract_status)"
                        >合同状态更改</el-button>
                        <el-link
                                target="_blank"
                                :href="scope.row.content_of_contract"
                                :underline="false"
                                style="margin-bottom:15px"
                        >
                            <el-button size="mini" type="info" round plain>合同下载</el-button>
                        </el-link>
                            <el-link
                                    target="_blank"
                                    :href="scope.row.supplementary_contents_of_the_contract"
                                    :underline="false"
                                    style="margin-bottom:15px"
                                    >
                                <el-button size="mini" type="info" round plain>补充合同下载</el-button>
                            </el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="currentPage1"
                        :page-size="pageSize"
                        :total="pageTotal"
                        @current-change="handleCurrentChange1"
                ></el-pagination>
            </div>
        </div>

        <!-- 状态更改编辑弹出框 -->
        <el-dialog title="更改编辑" :visible.sync="editVisible" width="30%">
            <el-form :model="form">
                <el-form-item label="合同状态 : ">
                    <el-select v-model="form.region" placeholder="请选择">
                        <el-option label="进行中" value="进行中"></el-option>
                        <el-option label="已完成" value="已完成"></el-option>
                        <el-option label="异常终止" value="异常终止"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>


    export default {
        name: 'contractShow',
        data() {
            return {
                pageIndex: 1,
                pageSize: 3,
                currentPage1:1,
                tableData: [],
                loading: true,
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {
                    region:"进行中"
                },
                idx: -1,
                id: -1,
                val:'',
                checkboxGroup: [],
                text: '',
                lab: '',
                text1:[],
                kinds:[
                    {text:"合同编号",mess:"contract_number"},{text:"合同名称",mess:"contract_name"},
                    {text:"甲方证件",mess:"user_idcard"},{text:"甲方通讯",mess:"user_phone"},
                    {text:"设计师通讯",mess:"designer_phone"},{text:"设计师证件",mess:"designer_idcard"},
                    {text:"装修团队通讯",mess:"decoration_company_phone"},{text:"装修团队证件",mess:"decoration_company_idcard"},
                    {text:"平台通讯",mess:"staff_phone"},
                    {text:"合同类型",mess:"contract_type"},{text:"合同状态",mess:"contract_status"}
                    ]
            };
        },
        created() {
            //点击进入时,获取进行中和异常终止合同数据
            this.$axios.get('contract/getContractMessage?currentPage1='+this.currentPage1+"&pageSize="+this.pageSize)
            //then获取成功；response成功后的返回值（对象）
                .then(response=>{
                    this.loading=false;
                    this.tableData = response.data.forlist;
                    this.pageTotal = response.data.pageTotal || 0;
                    if (this.pageTotal==0){
                        this.$message.warning(`无进行中或异常终止合同 !`);
                    }
                })
                //获取失败
                .catch(error=>{
                    this.loading=false;
                    console.log(error);
                    this.$message.error('网络或服务错误，不能访问');
                })
        },
        methods: {
            // 触发搜索按钮
            handleSearch() {
                this.loading=true;
                this.lab='change';
                this.currentPage1=1;
                console.log(this.text);
                //按输入的合同编号搜索
                this.$axios.get('contract/getContractMessageByKinds?checkboxGroup='+this.checkboxGroup+'&text='+this.text+'&currentPage1='+this.currentPage1+"&pageSize="+this.pageSize
                )
                //then获取成功；response成功后的返回值（对象）
                    .then(response=>{
                        this.loading=false;
                        this.tableData = response.data.forlist;
                        this.pageTotal = response.data.pageTotal || 0;
                        console.log(this.pageTotal);
                        console.log("警告语句:");
                        if (this.tableData[0].warnings==undefined){
                            this.$message.success(`成功搜索`+this.pageTotal+`条信息!`);
                        }else {
                            this.$message.warning(this.tableData[0].warnings+"");
                            this.tableData=[];
                        }
                    })
                    //获取失败
                    .catch(error=>{
                        this.loading=false;
                        this.$message.error(`网络或服务错误,无效搜索!`);
                    })

            },
            // 编辑操作
            handleEdit(idx,id,stu) {
                this.id=id;
                this.idx=idx;
                this.form.region=stu;
                console.log(id);
                this.editVisible = true;
            },
            // 保存编辑
            saveEdit() {
                var that=this;
                f();
                function f() {
                    //前往更改
                    that.$axios.put('contract/changeContractStatus?ids='+that.id+"&contract_status="+that.form.region,
                            {
                            headers: {
                                //以application/x-www-form-urlencoded的请求头部发送参数
                                "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                                "Access-Control-Allow-Origin": "*",
                                "Access-Control-Allow-Methods in preflight response": true
                            },
                            emulateJSON: true,
                            method: "PUT",
                        }
                    )
                    //then获取成功；response成功后的返回值（对象）
                        .then(response=>{
                            console.log("返回参数:"+response.data.mess);
                            //弹出信息
                            if (response.data.mess==1){
                                that.$message.success(`修改合同状态成功!`);
                                console.log(response.data.contract_status);
                                //再次获取数据
                                var index=that.idx;
                                //that.$set(that.tableData, that.idx, response.data.contract_status);
                                that.tableData[that.idx].contract_status=response.data.contract_status;
                                console.log(that.tableData);
                                console.log("idx:"+that.idx);
                            }else{
                                that.$message.warning(`没有可修改合同状态!`);
                            }
                        })
                        //获取失败
                        .catch(error=>{
                            console.log(error);
                            this.$message.error(`网络错误,无效搜索!`);
                        })
                    that.editVisible = false;

                }

            },
            handleCurrentChange1: function(currentPage) {//页码切换
                this.loading=true;
                this.currentPage1 = currentPage;
                console.log(this.lab);
                if (this.lab=='change'){
                    //走查询结果分页
                    this.$axios.get('contract/getContractMessageByKinds?checkboxGroup='+this.checkboxGroup+'&text='+this.text+'&currentPage1='+this.currentPage1+"&pageSize="+this.pageSize
                    )
                    //then获取成功；response成功后的返回值（对象）
                        .then(response=>{
                            this.loading=false;
                            this.tableData = response.data.forlist;
                            this.pageTotal = response.data.pageTotal || 0;
                        })
                        //获取失败
                        .catch(error=>{
                            this.loading=false;
                            console.log(error);
                            this.$message.error(`网络错误,无效搜索!`);
                        })
                }else {
                    //走默认初始分页
                    this.$axios.get('contract/getContractMessage?currentPage1='+this.currentPage1+"&pageSize="+this.pageSize)
                    //then获取成功；response成功后的返回值（对象）
                        .then(response=>{
                            this.loading=false;
                            this.tableData = response.data.forlist;
                            this.pageTotal = response.data.pageTotal || 0;
                        })
                        //获取失败
                        .catch(error=>{
                            this.loading=false;
                            console.log(error);
                            this.$message.error(`网络错误,无效搜索!`);
                        })
                }
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
